<template>
  <div class="content">
    <a-layout>
      <a-layout-header>
        <div >
          <a-page-header
              :title="'ID-' + matchId"
              :subtitle="matchInfo.matchTitle"
              :show-back="false"
          >
            <template #breadcrumb>
              <a-breadcrumb>
                <a-breadcrumb-item>首页</a-breadcrumb-item>
                <a-breadcrumb-item>比赛</a-breadcrumb-item>
                <a-breadcrumb-item>答题</a-breadcrumb-item>
              </a-breadcrumb>
            </template>
            <template #extra>
              <a-space>
                <span>距离比赛结束还有</span>
                <a-countdown
                    style="color: red !important;"
                    :value="Date.parse(matchInfo.endTime)"
                    :now="now"
                    @finish="() => {router.replace('/')}"
                />
                <a-button type="primary" style="margin-left: 20px" @click="submit">
                  <template #icon>
                    <icon-send/>
                  </template>
                  提交
                </a-button>
              </a-space>
            </template>
          </a-page-header>
        </div>
      </a-layout-header>
      <a-layout>
        <a-layout-sider  style="min-width: 600px;max-width: 700px" :resize-directions="['right']">
          <a-card >
            <template #title>
              No.{{topicInfo.topicNumber}} : {{topicInfo.title}}
            </template>
            <template #extra>
                <a-tag v-if="topicInfo.topicLanguage == 0" color="green">Java</a-tag>
                <a-tag v-else color="red">Html/Css/JavaScript</a-tag>
            </template>
            <a-scrollbar style="height: 470px;;overflow: auto;">
              <MdViewer :value="topicInfo.content" style="height: 500px;"/>
            </a-scrollbar>
          </a-card>
        </a-layout-sider>
        <a-layout-content style="min-width: 500px">
          <div style="min-height: 550px">
            <a-alert type="warning" >
              请注意本题目只允许提交
              {{ topicInfo.topicLanguage == 0 ? 'Java' : 'Html/Css/JavaScript' }}
              代码，提交错误将直接按照 0 分计算！
            </a-alert>
            <CodeEditor
                v-if="topicInfo.topicLanguage == 0"
                :value="submitCode"
                @update:value="onCodeChange"
                language="java"
                style="height: 510px;"/>
            <CodeEditor
                v-else
                :value="submitCode"
                @update:value="onCodeChange"
                language="html"
                style="height: 510px;"/>
          </div>
        </a-layout-content>
      </a-layout>
      <a-layout-footer style="margin-top: 25px">
        <div style="color: #888; font-size: 12px;text-align: center" >
          注意事项: 请完成每一道题目时保存答案，系统不会自动保存。如果你发现比赛系统出现异常现象，请立即联系在场管理员，
          题目备用提交路线：<a style="color: red">https://f.wps.cn/g/1QiUv2xt/</a>  当前题目id: {{ topicId }}
        </div>
      </a-layout-footer>
    </a-layout>
  </div>
</template>

<script setup lang="ts">
import {useRouter} from "vue-router";
import request from "../../axios/axios.ts";
import {onMounted, ref} from "vue";
import MdEditor from "../../components/MdEditor.vue";
import MdViewer from "../../components/MdViewer.vue";
import CodeEditor from "../../components/CodeEditor.vue";
import {Message} from "@arco-design/web-vue";
import useUserInfoStore from "../../store/user.ts";

const router = useRouter();
// 获取路由中携带的比赛参数
const matchId = router.currentRoute.value.query.matchId
const topicId = router.currentRoute.value.query.topicId

const user = useUserInfoStore()
const {id} = user.userInfo

const matchInfo = ref({})
const topicInfo = ref({})
const now = Date.now()
// 提交的代码
const submitCode = ref("")


onMounted(() => {
  getMatchInfo()
  getTopicInfo()
})

const onCodeChange = (v: string) => {
  submitCode.value = v;
};

const getMatchInfo = () => {
  request.get("/api/match/query/" + matchId).then(res => {
    if (res.data.success) {
      matchInfo.value = res.data.data
    }
  })
}

const getTopicInfo = () => {
  request.get("/api/topic/get/" + topicId).then(res => {
    if (res.data.success) {
      topicInfo.value = res.data.data
      if (topicInfo.value.submitStatus === true){
        request.post('/api/submit/selectOneSubmit',{
          matchId: matchId,
          topicId: topicId,
          submitStatus: 1,
          userId: id
        }).then(res => {
          if (res.data.success){
            submitCode.value = res.data.data.submitCode
          }
        })
      }
    }
  })
}

const submit = () => {
  console.log(submitCode.value)
  if (!submitCode.value){
    Message.error("请先输入你要提交的代码")
    return
  }
  request.post("/api/submit/submit",{
    matchId: matchId,
    submitCode: submitCode.value,
    topicId: topicId
  }).then(res => {
    if (res.data.success){
      Message.success("提交成功！")
      router.back()
    }
  })
}

const getTimeStatus = (item) => {
  const nowTime = new Date().getTime()
  const startTime = new Date(item.startTime).getTime()
  const endTime = new Date(item.endTime).getTime()
  if (nowTime < startTime) {
    return 0 // 未开始
  } else if (nowTime > startTime && nowTime < endTime) {
    return 1 // 进行中
  } else {
    return 2 // 已结束
  }
}


</script>

<style>
.content {
  padding: 20px;
  width: 80%;
  margin: 0 auto;
}
.arco-statistic-content .arco-statistic-value {
  color: red !important;
}
</style>
